<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命时间线</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .life-time-line {
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            /* background-image: linear-gradient(135deg,
                    #f5f5f5 20%,
                    #f9fad4 20%, #f9fad4 40%,
                    #f5f5f5 40%, #f5f5f5 60%,
                    #f8eaf0 60%, #f8eaf0 80%,
                    #f5f5f5 80%, #f5f5f5 100%); */
            background-color: #992;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
        }

        #scene-1-start {
            background-color: rgb(38, 32, 66);
        }

        .scene1-content {
            height: 100%;
            background-image: linear-gradient(135deg,
                    #f5f5f5 20%,
                    #f9fad4 20%, #f9fad4 40%,
                    #f5f5f5 40%, #f5f5f5 60%,
                    #f8eaf0 60%, #f8eaf0 80%,
                    #f5f5f5 80%, #f5f5f5 100%);

            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
        }

        .scene1-title {
            /* background-color: bisque; */
            text-align: center;
            height: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 40px;
        }

        .scene1-input-card {
            background-color: rgba(255, 192, 203, 0.7);
            width: 70%;
            height: 50%;
            border-radius: 80px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .scene1-input-notice {
            margin-top: 5%;
            font-family: 'kaiti';
            font-size: 30px;
        }
        .scene1-input{
            width: 70%;
            height: 40%;
            border-radius: 40px;
            border: 0px;
            font-size: 30px;
            text-align: center;
            background-color: rgba(255, 192, 203, 0.7);
            /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
            /* font-family: 'Times New Roman', Times, serif */
            font-family: Arial, Helvetica, sans-serif;
        }
        .scene1-button {
            background-color: skyblue;
            border: 2px red dashed;
            border-radius: 10px;
            height: 50px;
            margin-bottom: 3%;
            font-size: 30px;
            font-family: 'kaiti';
        }







        #scene-2-message {
            background-color: rgb(38, 32, 66);
        }

        .text-container {
            /* height: 100vh; */
            background-color: peru;
            background-color: rgb(38, 32, 66);
            opacity: 0;
            transition: opacity 1s ease;
            color: white;
        }

        @keyframes transitionFrom1To2 {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes transitionFrom1To22 {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .scene {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
        }

        .scene.active {
            display: block;
            position: auto;
            /* left: 50%;
            top: 50%; */
        }
    </style>
    <script>

        // ********************场景状态管理********************
        // 定义场景
        const scenes = {
            START: 'scene-1-start',
            MESSAGE: 'scene-2-message',
            EVENTLINE: 'event-line-screen-3',
            GRID: 'grid-screen-4'
        }
        let currentScene = scenes.START;

        // 切换场景函数
        function switchScene(targetScene) {
            document.getElementById(currentScene).classList.remove('active');
            document.getElementById(targetScene).classList.add('active');
            currentScene = targetScene;
        }

        // ********************非阻塞动画延时封装********************
        // 封装Promise化的延时函数
        function wait(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        // 封装css动画结束监听
        function onAnimationEnd(element, callback) {
            element.addEventListener('animationend', callback, { once: true });
        }

        // ********************DOM元素加载完毕提示********************
        document.addEventListener('DOMContentLoaded', function () {
            console.log('DOM fully loaded and parsed');
        })

        // ********************第1幕动画********************
        async function start() {
            // 第1幕
            console.log("点击了开始按钮");
            const birthDate = new Date("May 1, 2004");
            console.log(birthDate);
            if (!birthDate || isNaN(birthDate.getTime())) return; // 校验日期

            const scene1content = document.querySelector('.scene1-content');
            scene1content.style.animation = 'transitionFrom1To2 1.5s ease-out';
            await wait(1200);
            // 等待动画结束后切换场景
            await new Promise(resolve => onAnimationEnd(scene1content, resolve));
            // console.log(birthDate);
            switchScene(scenes.MESSAGE);
            console.log("current scene:", currentScene);

            // 进入第二幕逻辑
            await showMessage(birthDate);
            console.log("第一幕动画js逻辑结束", "current scene:", currentScene);
        }

        // ********************第2幕动画********************
        async function showMessage(birthDate) {
            console.log("已进入第2幕js逻辑");
            const textarea = document.querySelector(".text-container");
            textarea.style.animation = 'transitionFrom1To22 1s ease-out';
            textarea.style.opacity = 1;
            await wait(1000);
            // 等待动画结束后切换场景
            // await new Promise(resolve => onAnimationEnd(textarea, resolve));
            const back = document.querySelector("#scene-2-message");
            back.style.backgroundColor = "white";

            // switchScene(scenes.GRID); // 切换到网格场景
            // await renderGrid(birthDate);
        }
    </script>
</head>


<body>
    <div class="life-time-line">
        <!-- 第1幕：输入场景 -->
        <div id="scene-1-start" class="scene active">
            <div class="scene1-content">
                <div class="scene1-title">
                    人生时间线
                </div>
                <div class="scene1-input-card">
                    <div class="scene1-input-notice">
                        请输入您的出生日期：
                    </div>
                    <input type="date" class="scene1-input">
                    <button id="startButton" class="scene1-button" onclick="start()">确认β</button></button>
                </div>
            </div>
        </div>



        <!-- 第2幕：文字场景 -->
        <div id="scene-2-message" class="scene">
            <div class="text-container">
                <p id="birthText" class="text-line">1234</p>
                <p id="todayText" class="text-line">412341</p>
                <p id="messageText" class="text-line">856774563</p>
            </div>
        </div>
    </div>

</body>

</html>